<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script>
        let arrColor = ["red", "blue", "black"];
        let n = 0;
        let arrDs = [];//定义定时函数数组
        window.onload = () => {
            let box = document.getElementById("box");
            box.style.backgroundColor = "yellow";
        };

        function changeColor() {
            n++;
            if (
                n === arrColor.length
            ) {
                n = 0
            }
            let box = document.getElementById("box");
            box.style.background = arrColor[n];
        }
        //自动轮播
       let autoLoop= window.setInterval("changeColor()", 1000);

        //点击开始
        function kLoop() {
            for (let i = 0; i < arrDs.length; i++) {
                clearInterval(arrDs[i]);//why??
            }
            let num = setInterval("changeColor()", 1000);
            arrDs.push(num);
        }
        //点击结束
        function jLoop() {
            for (let i = 0; i < arrDs.length; i++) {
                clearInterval(arrDs[i]);
            }
            clearInterval(autoLoop)
        }
    </script>
</head>
<body>
<div id="box" onclick="changeColor()" onmouseover="jLoop()" onmouseout="kLoop()"></div>
<button onclick="kLoop()">开始</button>
<button onclick="jLoop()">结束</button>

</body>
</html>